<template>

    <div class="hero">
        英雄的名字:{{ name }} , 英雄的攻击力:{{ attack }} <button @click="changeHeroPropsName">修改属性中的name</button>
    </div>


</template>

<script setup lang="ts" name='Hero'>

//写法3  可选属性 attack  和默认值
interface Hero {
    name: string;
    attack?: number;  //可选属性
    changeName: () => void;
}

//定义属性的默认值
//name  和 attact 响应式
let props = defineProps<Hero>()




function changeHeroPropsName() {
    console.log("changeHeroPropsName");
    //props.name = props.name + '~'
    console.log("props", props);
    //调用父组件传递的方法
    props.changeName()



}

</script>

<style scoped>
.hero {

    width: 100%;
    min-height: 80px;
    line-height: 80px;
    margin: 10px;
    background-color: cadetblue;


}
</style>